<template>
    <div class="page">
        <div class="wrap">
            <GlobalLayout @tab="onTab" />
            <div class="head">
                <div class="bgHead">
                    <div class="content">
                        <img src="@/assets/img_logos.png" class="logo">
                        <div class="nav">
                            <a :class="tab == 1 ? 'on' : ''" @click="onTab2(1)">查询商标</a>
                            <a :class="tab == 2 ? 'on' : ''" @click="onTab2(2)">查注册号</a>
                            <a :class="tab == 3 ? 'on' : ''" @click="onTab2(3)">查申请人</a>
                            <a :class="tab == 4 ? 'on' : ''" @click="onTab2(4)">查类别</a>
                            <a :class="tab == 5 ? 'on' : ''" @click="onTab2(5)">商标注册<img src="@/assets/icon_hot.png"
                                    class="hot"></a>
                        </div>
                        <div class="search">
                            <input v-model="form.name" type="text" class="input" placeholder="请输入商标名称">
                            <a class="btn" @click="show3 = true">查一下</a>
                        </div>
                        <p>已为用户提供 <span>4942392</span> 次商标查询服务</p>
                    </div>
                </div>
            </div>
            <Step1 v-if="tab == 1" @change="onShow" />
            <Step2 v-if="tab == 2" @change="onShow" />
            <Step3 v-if="tab == 3" @change="onShow" />
            <Step4 v-if="tab == 4" @change="onShow" />
            <Step5 v-if="tab == 5" @change="onShow" />
            <GlobalFooter />
        </div>
        <Modal1 ref="hy" v-if="show" :isVer="isVer" @submit="onSubmit" @close="show = false" />
        <Modal2 ref="down" :isVer="isVer" v-if="show2" @submit="onSubmit" @close="show2 = false" />
        <Modal3 ref="zc" v-if="show3" :name="form.name" :isVer="isVer" @submit="onSubmit" @close="show3 = false" />
    </div>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import { saveCustomer, isVerification, yiDunProtector } from '@/api/customer'
import { useRoute, useRouter } from 'vue-router'
import GlobalLayout from '@/layout/GlobalLayout.vue'
import GlobalFooter from '@/layout/GlobalFooter.vue'
import Modal1 from '@/components/modal/Modal1.vue'
import Modal2 from '@/components/modal/Modal2.vue'
import Modal3 from '@/components/modal/Modal3.vue'
import Step1 from '@/components/Step1.vue'
import Step2 from '@/components/Step2.vue'
import Step3 from '@/components/Step3.vue'
import Step4 from '@/components/Step4.vue'
import Step5 from '@/components/Step5.vue'

const tab = ref(1)
const router = useRouter()
const route = useRoute()
const show = ref(false)
const show2 = ref(false)
const dunData = ref({})
const dunToken = ref('')
const show3 = ref(false)
const isVer = ref(false)
const form = ref({
    name: '',
    phone: '',
    company: 'ls',
    code: '',
    type: '1',
    search_keywords: '',
    first_url: '',
    baidu_logid_url: null,
    qhclickid: null
})

const getParams = async () => {
    const firstUrl = window.location.href
    const cleanQueryString = firstUrl.replace(/&amp;/g, '&')
    const urlParams = new URLSearchParams(window.location.search);
    const params = {};

    for (const [key, value] of urlParams.entries()) {
        // 移除参数名和值中的空格
        const trimmedKey = key.replace(/\s+/g, '');  // 移除参数名中的空格
        const trimmedValue = value.replace(/\s+/g, '');  // 移除值中的空格
        params[trimmedKey] = trimmedValue;
    }
    form.value.search_keywords = params.words
    form.value.first_url = firstUrl
	if(params.bd_vid) {
		form.value.baidu_logid_url = cleanQueryString
	}
	if(params.qhclickid) {
		form.value.qhclickid = params.qhclickid
	}
    console.log('---------', form.value)
}
getParams()

const getVerification = () => {
    isVerification(form.value).then(res => {
        isVer.value = res.data.on_sms
    })
}
getVerification()

const onTab = key => {
    if (key != 6) {
        tab.value = key
    }
}
const onTab2 = key => {
    tab.value = key
}

const onShow = obj => {
    form.value.name = obj.data.name
    if(obj.type == 1) {
        show.value = true
    }
    if(obj.type == 2) {
        show2.value = true
    }
    if(obj.type == 3) {
        show3.value = true
    }
}

const onSubmit = async (formData) => {
    form.value.search_keywords = route.query.words;
    form.value.qhclickid = route.query.qhclickid || '';
    form.value.name = formData.name || ''
    form.value.phone = formData.phone
    form.value.code = formData.code
    await getWyDunToken()
    form.value.wy_dun_token = dunToken.value
	form.value.sceneData = [{verifyType: "upLinkSMS"}]
    if(form.value.phone ==='') {
        ElMessage.error('请输入手机号')
        return false
    }
    try {
        const res = await saveCustomer(form.value)
        if (res.code === 0) {
            success.value = true
            show.value = false
            show2.value = false
            show3.value = false
            form.value = {
                name: '',
                phone: '',
                company: 'ls',
                code: '',
                type: '1'
            }
            window._agl && window._agl.push(['track', ['success', { t: 3 }]])
        }
    } catch (error) {
        console.error('提交失败:', error);
    }
    getParams()
}

const getWyDun = async (data) => {
	const res = await yiDunProtector(data)
	dunData.value = res.data
	console.log(res)
	if(res.data.risk_level === 2 || res.data.risk_level === 3) {
		window.location.href = 'http://p99.biaofw.com/'
	}
}

const getWyDunToken = async () => {
	const neg = createNEGuardian({ productId: 'YD00973669355806', timeout: 6000 })
	const token = await neg.getToken()
	dunToken.value = token.token
}

onMounted(async () => {
    tab.value = route.query.cat
    await getWyDunToken()
	await getWyDun({ token: dunToken.value, sceneData: [{ verifyType: 'upLinkSMS' }] })
})
</script>